<template>
  <el-container class="dashboard-layout-container">
    <el-container>

      
      <el-main class="dashboard-main-container">
        <router-view v-slot="{ Component }">
          <transition
              :name="settingsStore.pageAnimation"
              mode="out-in"
              appear
          >
            <!---<keep-alive :include="cachedViews">-->

            <component
                :is="Component"
                :key="$route.fullPath"
            />

          </transition>

        </router-view>
      </el-main>
    </el-container>
  </el-container>

  <!-- 设置抽屉 -->
  <setting-drawer
    v-model:visible="drawerVisible"
    v-model:isCollapse="isCollapse"
  />

  <!-- 添加锁屏组件 -->
  <lock-screen ref="lockScreenRef" />

  <!-- 水印组件 -->
  <Watermark />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import SettingDrawer from '@/components/SettingDrawer/index.vue'
import Navbar from '@/layouts/components/Navbar/index.vue'
import LockScreen from '@/components/LockScreen/index.vue'
import Watermark from '@/components/Watermark/index.vue'

import { useSettingsStore } from "@/store";

const settingsStore = useSettingsStore()
const drawerVisible = ref(false)
const lockScreenRef = ref()
const isCollapse = ref(true)

const handleLock = () => {
  lockScreenRef.value?.lock()
}
</script>

<style scoped>
.dashboard-layout-container {
  height: 100vh;
  overflow: hidden;
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
}

.dashboard-header {
  background-color: var(--el-bg-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
}

.dashboard-main-container {
  /* 移除Element Plus默认的padding */
  --el-main-padding: 0px !important;
  padding: 0 !important;
  background-color: var(--el-bg-color);
  height: 100vh;
  overflow: hidden;
}

/* 覆盖Element Plus默认样式 */
:deep(.el-main) {
  --el-main-padding: 0px;
  padding: 0 !important;
}
</style>